.pickable_select {
  .ant-select-arrow {
    display: none;
  }

  .ant-select-clear {
    inset-inline-end: 13px !important;
  }
}

.pick-input_base-select {
  position: relative;
  background-color: var(--color-gray-1);
  padding: 8px 16px;
  font-size: 14px;
  line-height: 22px;
  min-height: 38px;

  &::after {
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    content: "";
    border: solid 1px var(--color-gray-5);
    border-radius: 8px;
  }

  &.pick-input_base-select--active,
  &:focus {
    background-color: var(--color-primary-bg);

    &::after {
      border: solid 2px var(--color-primary);
    }
  }

  &.pick-input_base-select--disabled {
    cursor: not-allowed;
    background-color: white !important;

    &::after {
      border: solid 1px var(--color-gray-5) !important;
    }

    * {
      pointer-events: none;
    }
  }

  &:not(.pick-input_base-select--active):not(:focus):hover {
    background-color: var(--color-gray-2);

    &::after {
      border: solid 1px var(--color-primary);
    }
  }

  > div:first-child {
    color: #00000073;
  }

  > .pick-input_base-select_selections-under-placeholder {
    & > div:first-child {
      margin-top: 4px;
    }
  }
}

.pick-input_base-select_selection {
  display: flex;
  color: var(--color-text);

  > div:first-child {
    flex-shrink: 1;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  > div:last-child {
    cursor: pointer;
    flex-shrink: 0;

    span {
      pointer-events: none !important;
    }
  }
}

// TODO: fix in sdk and delete this
.rjsf__array-schema-field .pick-input_base-select:not(:hover):not(:active).pick-input_base-select--active:after {
  border-color: var(--color-primary) !important
}
